<template>
  <div style="display: flex; flex-direction: column;">
    <div class="scroll-container">
        <div class="inner" v-for="(item, index) in items" :index="index" :key="key">
          <div style="font-size: 15px;">{{item.name}}</div>
          <div style="font-size: 13px; font-weight: lighter;">{{item.count}}</div>
          <div style="height: 2rpx; width: 50%; background: #ff6634;"></div>
          </div>
    </div>
    <div style="display: flex; flex-direction: column; flex-shrink: 0;">
      <div style="height: 180rpx; line-height: 180rpx; font-weight: bold; text-align: center; font-size: 46rpx;">花园之梦厅</div>
      <div style="height: 30rpx; line-height: 30rpx; text-align: center; color: #999; font-size: 30rpx; display: flex; justify-content: center;">
        <div style="padding-right: 24rpx; border-right: 1rpx solid #e2e1e1;">6-30桌</div>
        <div style="padding-right: 24rpx; padding-left: 24rpx; border-right: 1rpx solid #e2e1e1;">¥3888元/桌 </div>
        <div style="padding-right: 24rpx; padding-left: 24rpx; border-right: 1rpx solid #e2e1e1;">1柱</div>
        <div style="padding-left: 24rpx;">层高5m</div>
        </div>
      <div class="detail-item">
        <div class="fold">
          <div style="color: #9a9b96; flex-shrink: 0;">宴会厅特色：</div>
          <div v-bind:style="{ 'white-space': wrapData }"> 地处天湖旅游度假区,靠近湖州地标,湖州唯一仪式堂,全息投影,专业演唱会级舞美灯光</div>
          </div>
        <div :class="{'border-item':isStatus}" v-show="isShow" style="font-size: 28rpx; color: #444; display: flex;">
          <div v-show="isShow" style="height: 86rpx; width: 50%; line-height: 86rpx;">
            <span style="color: #9a9b96;">起订价格：</span>
            <span style="color: #444;">¥3888元/桌</span>
            </div>
          <div v-show="isShow" style="height: 86rpx; width: 50%; line-height: 86rpx;">
            <span style="color: #9a9b96;">起订桌数：</span>
            <span style="color: #444;">6桌</span>
            </div>
          </div>
        <div :class="{'border-item':isStatus}" v-show="isShow" style="font-size: 28rpx; color: #444; display: flex;">
          <div v-show="isShow" style="height: 86rpx; width: 50%; line-height: 86rpx;">
            <span style="color: #9a9b96;">桌规格：</span>
            <span style="color: #444;">0人/桌</span>
                        </div>
          <div v-show="isShow" style="height: 86rpx; width: 50%; line-height: 86rpx;">
            <span style="color: #9a9b96;">迎宾区：</span>
            <span style="color: #444;">有</span>
            </div>
          </div>
        <div :class="{'border-item':isStatus}" v-show="isShow" style="font-size: 28rpx; color: #444; display: flex;">
          <div v-show="isShow" style="height: 86rpx; width: 50%; line-height: 86rpx;">
            <span style="color: #9a9b96;">香槟区：</span>
            <span style="color: #444;">有</span>
            </div>
          <div v-show="isShow" style="height: 86rpx; width: 50%; line-height: 86rpx; color: #9a9b96;">舞台：</div>
          </div>
        <div :class="{'border-item':isStatus}" v-show="isShow" style="font-size: 28rpx; color: #444; display: flex;">
          <div v-show="isShow" style="height: 86rpx; width: 50%; line-height: 86rpx;">
            <span style="color: #9a9b96;">服务费：</span>
            <span style="color: #444;">面议</span>
            </div>
          <div v-show="isShow" style="height: 86rpx; width: 50%; line-height: 86rpx;"></div>
          </div>
        <div style="height: 110rpx; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #666; border-top: 1rpx solid #e1e2e1;" @click="buttonTap">
          <div>{{buttonName}}</div>
          <div style="margin-left: 8rpx; display: flex; flex-direction: column; justify-content: center;" >
            <img style="height: 20rpx; width: 20rpx;" :src="buttonImage">
          </div>
          </div>
        </div>
    </div>
          <div class="image-container">
        <div class="image-div" v-for="(image, index) in images['花园之梦厅']" :index="index" :key="key">
          <img :src="image" style="width: 100%; display: block;" @click="previewImage"><!-- 修复img bug -->
        </div>
      </div>
    <footer class="footer">
      <div style="height: 80rpx; line-height: 80rpx; text-align: center; width: 45%; color: #666; border: 2rpx solid #e1e1e1; border-radius: 6rpx;">联系商户</div>
      <div style="height: 80rpx; line-height: 80rpx; margin-left: 20rpx; text-align:center; width: 45%; background: #ff6634; border: 2rpx solid #ff6634; border-radius: 6rpx; color: white;">查看档期</div>
    </footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        {
          name: '花园之梦厅',
          count: '6~30桌',
          height: '层高 5m | 无柱'
        },
        {
          name: '水晶之恋厅',
          count: '6~30桌',
          height: '层高 5m | 无柱'
        },
        {
          name: '银河星辰厅',
          count: '6~33桌',
          height: '层高 7m | 无柱'
        },
        {
          name: '天幕巨影厅',
          count: '6~23桌',
          height: '层高 7m | 无柱'
        },
        {
          name: '湖光月夜厅',
          count: '6~32桌',
          height: '层高 7m | 无柱'
        },
        {
          name: '天空之城厅',
          count: '20~60桌',
          height: '层高 7m | 无柱'
        },
        {
          name: '长笛音乐厅',
          count: '6~39桌',
          height: '层高 7m | 无柱'
        },
        {
          name: '塞纳仪式厅',
          count: '10~10桌',
          height: '层高 8m | 无柱'
        },
        {
          name: '游艇婚礼',
          count: '10~10桌',
          height: '层高 1000m | 无柱'
        },
        {
          name: '露台花园',
          count: '10~10桌',
          height: '层高 1000m | 无柱'
        },
        {
          name: '草坪仪式',
          count: '30~120桌',
          height: '层高 1000m | 无柱'
        },
        {
          name: '仪式堂',
          count: '6~30桌',
          height: '层高 5m | 无柱'
        },
        {
          name: '秘密花园厅',
          count: '6~30桌',
          height: '层高 5m | 无柱'
        },
        {
          name: '冰雪童话厅',
          count: '6~30桌',
          height: '层高 5m | 无柱'
        }
      ],
      images: {
        '花园之梦厅': [
          `${process.env.PIC_BASE_URL}hyzm2.jpg`,
          `${process.env.PIC_BASE_URL}hyzm3.jpg`,
          `${process.env.PIC_BASE_URL}hyzm1.jpg`,
          `${process.env.PIC_BASE_URL}hyzm4.jpg`,
          `${process.env.PIC_BASE_URL}hyzm5.jpg`,
          `${process.env.PIC_BASE_URL}hyzm6.jpg`,
          `${process.env.PIC_BASE_URL}hyzm7.jpg`
        ],
        '水晶之恋厅': [
          `${process.env.PIC_BASE_URL}sjzl1.jpg`,
          `${process.env.PIC_BASE_URL}sjzl2.jpg`,
          `${process.env.PIC_BASE_URL}sjzl3.jpg`,
          `${process.env.PIC_BASE_URL}sjzl4.jpg`,
          `${process.env.PIC_BASE_URL}sjzl5.jpg`,
          `${process.env.PIC_BASE_URL}sjzl6.jpg`,
          `${process.env.PIC_BASE_URL}sjzl7.jpg`
        ],
        '银河星辰厅': [
          `${process.env.PIC_BASE_URL}yhxc1.jpg`,
          `${process.env.PIC_BASE_URL}yhxc2.jpg`,
          `${process.env.PIC_BASE_URL}yhxc3.jpg`,
          `${process.env.PIC_BASE_URL}yhxc4.jpg`,
          `${process.env.PIC_BASE_URL}yhxc5.jpg`
        ],
        '天幕巨影厅': [
          'http://pe9eiblf9.bkt.clouddn.com/tmjy1.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/tmjy2.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/tmjy3.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/tmjy4.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/tmjy5.jpg'
        ],
        '湖光月夜厅': [
          'http://pe9eiblf9.bkt.clouddn.com/hgyy1.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/hgyy2.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/hgyy3.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/hgyy4.jpg'
        ],
        '天空之城厅': [
          'http://pe9eiblf9.bkt.clouddn.com/tkzc1.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/tkzc2.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/tkzc3.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/tkzc4.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/tkzc5.jpg'
        ],
        '长笛音乐厅': [
          'http://pe9eiblf9.bkt.clouddn.com/cdyy1.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/cdyy2.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/cdyy3.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/cdyy4.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/cdyy5.jpg'
        ],
        '塞纳仪式厅': [
          'http://pe9eiblf9.bkt.clouddn.com/snys1.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/snys2.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/snys3.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/snys4.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/snys5.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/snys6.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/snys7.jpg'
        ],
        '游艇婚礼': [
          'http://pe9eiblf9.bkt.clouddn.com/ythl1.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/ythl2.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/ythl3.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/ythl4.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/ythl5.jpg'
        ],
        '露台花园': [
          'http://pe9eiblf9.bkt.clouddn.com/lthy1.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/lthy2.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/lthy3.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/lthy4.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/lthy5.jpg'
        ],
        '草坪仪式': [
          'http://pe9eiblf9.bkt.clouddn.com/cpys1.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/cpys2.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/cpys3.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/cpys4.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/cpys5.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/cpys6.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/cpys7.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/cpys8.jpg'
        ],
        '仪式堂': [
          'http://pe9eiblf9.bkt.clouddn.com/yst1.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/yst2.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/yst3.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/yst4.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/yst5.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/yst6.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/yst7.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/yst8.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/yst9.jpg'
        ],
        '秘密花园厅': [
          'http://pe9eiblf9.bkt.clouddn.com/mmhy1.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/mmhy2.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/mmhy3.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/mmhy4.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/mmhy5.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/mmhy6.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/mmhy7.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/mmhy8.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/mmhy9.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/mmhy10.jpg'
        ],
        '冰雪童话厅': [
          'http://pe9eiblf9.bkt.clouddn.com/bxth1.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/bxth2.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/bxth3.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/bxth4.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/bxth5.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/bxth6.jpg',
          'http://pe9eiblf9.bkt.clouddn.com/bxth7.jpg'
        ]
      },
      buttonName: '展开详情',
      buttonImage: '/static/arrow_down.png',
      isShow: false,
      isStatus: false,
      wrapData: 'nowrap'
    }
  },
  methods: {
    buttonTap () {
      if (this.buttonName === '展开详情') {
        this.buttonName = '收起'
        this.buttonImage = '/static/arrow_up.png'
        this.isShow = true
        this.isStatus = true
        this.wrapData = 'normal'
      } else {
        this.buttonName = '展开详情'
        this.buttonImage = '/static/arrow_down.png'
        this.isShow = false
        this.isStatus = false
        this.wrapData = 'nowrap'
      }
    },
    previewImage () {
      console.log('preview image')
    }
  }
}
</script>


<style>

.scroll-container {
  display: flex;
  overflow-x: scroll;
  width: 100%;
  height: 136rpx;
  border-bottom: 1rpx solid #f0f1f0;
  flex-shrink: 0;
}

.inner {
  width: 25%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  align-items: center;
  justify-content: space-between;
}

.image-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 120rpx;
}

.image-div {
  flex-shrink: 0;
  width: 100%;
}

.footer {
  position: fixed;
  bottom: 0px;
  background: white;
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-item {
  margin-left: 30rpx;
  margin-right: 30rpx;
  border: 1rpx solid #e1e2e1;
  margin-top:50rpx; margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.border-item {
  border-top: 1rpx solid #e1e2e1;
}

.fold {
  margin-top: 80rpx;
  margin-bottom: 36rpx;
  width: 100%;
  display: flex;
  text-align: center;
  font-size: 28rpx;
  color: #444;
  overflow: hidden;
}

</style>
